<template>
    <div class="preference_header">
        <div class="menu_list">
            <div class="menu_item" v-for="item in state.menuList" :key="item.value"
                :class="item.value == state.activeMenu ? 'menu_item_active' : ''" @click="state.activeMenu = item.value">{{ item.label }}</div>
        </div>
    </div>
</template>

<script setup>
const { store, state } = inject('preference_store')
</script>

<style lang="scss" scoped>
.preference_header {
    margin-bottom: 16px;
    .menu_list {
        display: flex;
        align-items: center;

        .menu_item {
            display: flex;
            border-radius: 100px;
            padding: 5px 16px;
            margin-right: 12px;
            color: #1d2129;
            font-size: 14px;
            cursor: pointer;
        }

        .menu_item_active {
            background: #f2f3f5;
            color: #5e8fff;
        }
    }
}
</style>